<template>
    <div id="home-page">
        <!-- 头部导航开始 -->
        <el-affix :offset="0">
            <div class="header">
                <div class="left">
                    <img src="https://liblibai-web-static.vibrou.com/liblibai_v4_online/static/_next/static/images/icon-logo.e3ce24f316fb81dbde1cafc3bf956080.svg"
                        alt="">

                    <el-icon @click="showLeftMenu" v-if="leftMenuStatus">
                        <Expand />
                    </el-icon>
                    <el-icon @click="showLeftMenu" v-else>
                        <Fold />
                    </el-icon>
                </div>
                <div class="right">
                    <el-input v-model="searchText" style="width: 440px" placeholder="Please Input" :suffix-icon="Search" />
                    <div class="btn">
                        <el-dropdown>
                            <el-button type="default">
                                <el-icon>
                                    <CirclePlus />
                                </el-icon>
                                发布
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>作品</el-dropdown-item>
                                    <el-dropdown-item>模型</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-dropdown v-if="publicKey.length > 0" placement="bottom-start">
                            <el-button> {{ publicKey.slice(35) }} </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>{{ publicKey }}</el-dropdown-item>
                                    <el-dropdown-item @click="quitSys">退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-button v-else type="default" @click="router.push('/login')">登录</el-button>
                    </div>
                </div>
            </div>
        </el-affix>
        <!-- 头部导航结束 -->
        <div class="body">
            <!-- 左侧导航 -->
            <div class="left-menu" ref="leftMenuDiv">
                <div class="small-title">探索</div>
                <div class="menu-item" @click="goPage('/')" :class="activeMenuItem == '/' ? 'active' : ''">
                    <el-icon>
                        <House />
                    </el-icon>
                    <div class="label">AISpace</div>
                </div>
                <div class="menu-item" @click="goPage('/aisoulpage')"
                    :class="activeMenuItem == '/aisoulpage' ? 'active' : ''">
                    <el-icon>
                        <MagicStick />
                    </el-icon>
                    <div class="label">作品灵感</div>
                </div>
                <div class="small-title">创作</div>
                <div class="menu-item online-create" @click="goPage('/createlorapage')">
                    <el-icon>
                        <Cpu />
                    </el-icon>
                    <div class="label">在线生图
                        <div class="desc">Web UI</div>
                    </div>
                </div>
                <div class="menu-item" @click="goPage('/photopage')"
                    :class="activeMenuItem == '/photopage' ? 'active' : ''">
                    <el-icon>
                        <TrophyBase />
                    </el-icon>
                    <div class="label">证件照
                        <div class="desc">切换底色</div>
                    </div>
                </div>
                <div class="menu-item" @click="goPage('/personpage')"
                    :class="activeMenuItem == '/personpage' ? 'active' : ''">
                    <el-icon>
                        <User />
                    </el-icon>
                    <!-- <el-icon class="user"></el-icon> -->
                    <div class="label">个人中心</div>
                </div>
                <div class="menu-item" @click="goPage('/vippage')" :class="activeMenuItem == '/vippage' ? 'active' : ''">
                    <el-icon>
                        <Coin />
                    </el-icon>
                    <div class="label">会员中心</div>
                </div>
                <el-button style="width:100%;" :icon="Connection">加入我们</el-button>


            </div>
            <!-- 右侧的图片 -->
            <div class="pic-board" ref="picBoardDiv">
                <router-view keep-alive></router-view>
            </div>

        </div>
    </div>
</template>
  
<script setup>
import { ref, nextTick, onMounted } from "vue"
import { TrophyBase, Connection, Expand, CirclePlus, House, MagicStick, Cpu, Coin, User, Fold, Search } from "@element-plus/icons-vue"
import { quitSysApi } from "../../network/login"
import { getLocalData, removeLocalData } from "../../utils/utils"
import { ElMessage } from "element-plus"
import { useRouter } from "vue-router"

const router = useRouter()
// 隐藏左侧菜单
var leftMenuStatus = ref(true)
//活跃的菜单按钮
const activeMenuItem = ref("/")
const searchText = ref("")

var publicKey = ref("")

const leftMenuDiv = ref(null)
const picBoardDiv = ref(null)

const quitSys = () => {
    removeLocalData("publicKey")
    publicKey.value = ""
    quitSysApi()
    ElMessage({
        message: "退出成功",
        type: "success"
    })
}

const goPage = (path) => {
    activeMenuItem.value = path
    router.push(path)
}

const showLeftMenu = () => {


    nextTick(() => {
        if (leftMenuStatus.value) {
            picBoardDiv.value.style.width = "100%"
            leftMenuDiv.value.style.width = "0%"
        } else {
            picBoardDiv.value.style.width = "87%"
            leftMenuDiv.value.style.width = "13%"
        }

        setTimeout(() => {
            leftMenuStatus.value = !leftMenuStatus.value
        }, 500);

    })

}



onMounted(() => {

    getLocalData("publicKey", (pk) => {
        if (pk) {
            publicKey.value = pk
        }
    })


})
</script>
<style scoped>
#home-page {
    width: 100%;
}

#home-page .header {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    height: 40px;
    line-height: 40px;
    padding: 5px 10px;
    box-shadow: 1px 1px 1px rgba(128, 128, 128, 0.5);
    background-color: #fff;
}

#home-page .header .left {
    width: 13%;
    display: flex;
    display: -webkit-box;
    align-items: center;
}

#home-page .header .left .el-icon {
    cursor: pointer;
}

#home-page .header .left span {
    margin-left: 10px;
}

#home-page .header .right {
    width: 87%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
}

#home-page .header .btn {
    width: 15%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}

/* 左侧菜单 */

#home-page .body {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
}

#home-page .body .left-menu {
    height: 100vh;
    width: 13%;
    transition: width 0.5s ease;
    box-shadow: 1px 0px 1px rgba(128, 128, 128, 0.5);
    padding: 5px 10px;
    overflow: hidden;
}

#home-page .body .pic-board {
    height: 100vh;
    width: 87%;
    transition: width 0.5s ease;
    overflow-x: scroll;
}

#home-page .body .left-menu .small-title {
    font-size: 12px;
    color: gray;
    line-height: 48px;
}

#home-page .body .left-menu .menu-item {
    cursor: pointer;
    font-size: 16px;
    margin: 24px 0;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    border-radius: 5px;
    padding: 10px;
}

#home-page .body .left-menu .online-create {
    background-image: url("https://liblibai-web-static.vibrou.com/liblibai_v4_online/static/_next/static/images/v3-bg.df984ca0cc3fca76ac4e1aff0e847b6f.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#home-page .body .left-menu .active {
    background-color: rgba(128, 128, 128, 0.2);
    color: #409EFF;
}

#home-page .body .left-menu .menu-item .label {
    margin-left: 5px;
}

#home-page .body .left-menu .menu-item .desc {
    color: gray;
    font-size: 12px;
    line-height: 24px;
}
</style>